Progress bars as
a single URL.
Drop a static progress PNG into any README, GitHub Page, or markdown file. From 0 to 100.
How it works
Append a number from 0 to 100. Get a static PNG.
The default, wide image uses a large/ path prefix. For the smaller (compact) bar, keep the same pattern but remove the large segment. The optional label segment names a visual style; you can drop it in both the wide and compact cases.
URL patterns (same 56% example)
https://progressbar.info/large/label/56https://progressbar.info/large/56https://progressbar.info/label/56https://progressbar.info/56Preview (large + label style)
Use it anywhere
Markdown, HTML, GitHub READMEs — wherever images render.
<img src="https://progressbar.info/large/label/56" alt="56% complete" /><img src="https://progressbar.info/large/label/75" /># large
https://progressbar.info/large/label/{0-100}
https://progressbar.info/large/{0-100}
# small (remove large/)
https://progressbar.info/label/{0-100}
https://progressbar.info/{0-100}Examples for every link type
Each way of building a link (wide or small, with or without extra path pieces) is shown below. We use four sample values — 0%, 10%, 50%, and 100% — so you can see the idea without a long list. In real use you can pick any whole number from 0 to 100; the size column is the image size in pixels for that style.
The usual choice: the large-size bar, with “large” and the style name in the link. Best when you want the clearest, default look.
| Preview | Path | Size | |
|---|---|---|---|
 | large/label/0 | 520×72 px | |
| large/label/10 | 520×72 px | |
 | large/label/50 | 520×72 px | |
 | large/label/100 | 520×72 px |
Same large-size bar, but a simpler URL that skips the style segment. Use this if you don’t need a named style in the path.
| Preview | Path | Size | |
|---|---|---|---|
 | large/0 | 520×72 px | |
 | large/10 | 520×72 px | |
 | large/50 | 520×72 px | |
 | large/100 | 520×72 px |
A compact image — the “small” look with the style still in the link, without the “large” prefix.
| Preview | Path | Size | |
|---|---|---|---|
 | label/0 | 64×32 px | |
 | label/10 | 64×32 px | |
 | label/50 | 64×32 px | |
 | label/100 | 64×32 px |
Shortest possible link: just the site and the number. Handy in tight spaces; same idea as the other “small” option.
| Preview | Path | Size | |
|---|---|---|---|
 | 0 | 64×32 px | |
 | 10 | 64×32 px | |
 | 50 | 64×32 px | |
 | 100 | 64×32 px |
Want a new style?
New progress bar designs are added by the community. Open a pull request with your model and image generator — that's it.
Contribute on GitHub